<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天</title>

  <script  src="./static/jquery.min.js"></script>
  <script  src="./static/sockjs.min.js"></script>
  <script  src="./static/stomp.min.js"></script>

</head>
<body>

	 <form id="aricForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit" />
    </form>
    
    <div id="output"></div>

</body>

	<script type="text/javascript">
	
	 $("#aricForm").submit(function(e){
	        e.preventDefault();
	        var text = $("#aricForm").find('textarea[name="text"]').val();
	        sendSpittle(text);
	    });
		
		 var sock = new SockJS("/endpointChat");//连接endpoint名为"endpointChat"的endpoint
   		 var stomp = Stomp.over(sock);
   		 stomp.connect('guest','guest',function(frame){
       		 //订阅/user/queue/notifications发送的消息,这里与在simpMessagingTemplate.convertAndSendToUser定义地址一致,/user是必须的
       		 stomp.subscribe("/user/queue/msg",handleNotification);
    	});
   		 
   		 function handleNotification(message){
   	        $("#output").append("<b>Received: " + message.body + "</b><br/>");
   	    }

   	    function sendSpittle(text){
   	        stomp.send("/chat",{},text);
   	    }

   	    $("#stop").click(function(){
   	        sock.close();
   	    });
	
	</script>

</html>